import React, { Component } from 'react'
import {withStyles} from 'material-ui/styles'
import IconButton from 'material-ui/IconButton'
import Icon from 'material-ui/Icon'
import TextField from 'material-ui/TextField'
import CourseList from '../../course/CourseList'

const styles = theme => ({
	root: {
	}
})

@withStyles(styles)
class Recomms extends Component {
	constructor(props) {
	  super(props);
	  this.state = {
	  	searchKey: null,
	  	courses: []
	  }
	}

	onChange(e) {
		const searchKey = e.target.value;
		this.setState({searchKey})
	}

	async onSearch() {
		const res = await this.props.fetchCourse(this.state.searchKey)
		this.setState({courses: res.courses})
	}

	onKeyDown(e) {
		if(e.keyCode == 13) {
        this.onSearch()
    }
	}

	render() {
		const {classes} = this.props
		console.log(this.state.courses)
		return (
			<div className={classes.root}>
				<TextField
          placeholder="查找推荐课程 ......"
          className={classes.textField}
          margin="none"
          color="contrast"
          InputClassName={classes.textInput}
          onChange={e => this.onChange(e)}
          inputProps={{onKeyDown: (e) => this.onKeyDown(e)}}
    		/>
        <IconButton className={classes.button} onClick={() => this.onSearch()}>
          <Icon className={classes.icon}>search</Icon>
        </IconButton>
        <CourseList courses={this.state.courses} {...this.props} />
			</div>
		)
	}
}

export default Recomms